<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层叠样式表</title>
    <!--在head标签中书写style标签  写css样式-->
    <style>
        /*选择器：就是选中指定的标签
          标签选择器： 选择器的名称就是标签的名称  会让选择器中的样式适用于页面所有对应的该标签
          id选择器：  id值一般是唯一的，不要数字开头  特点：#id名称
          class选择器 class选择器名称可以无限重复  特点：.class值
          以上三个也称之为三大基础选择器
          样式也符合就近原则：谁离我最近我就优先使用谁  权重值越大  id的权重大于class的权重
             id选择器 > class选择器  > 标签选择器 > *通配选择器
             写在标签内容的样式(行内样式)  >  使用style标签书写的样式(内联式)
            同权重下 内联式  > 外联式
            不同权重下  id选择器 > class选择器  > 标签选择器 > *通配选择器
        */
        .one {
            height: 300px;
            width: 400px;
            border: 1px solid red;
        }

        /*  #three {
            height: 300px;
            width: 400px;
            border: 1px solid red;
            background-color: greenyellow;
        }*/

        .three {
            height: 300px;
            width: 400px;
            border: 1px solid red;
            background-color: chocolate;
        }

        div {
            height: 300px;
            width: 400px;
            border: 1px solid red;
            /*background-color: blue;*/
        }

        p {
            height: 100px;
            width: 200px;
            border: 1px solid gray;
        }

        * {
            height: 100px;
            width: 100px;
            border: 1px solid blue;
        }

    </style>
</head>
<body>
    <div class="one" style="height: 200px;width: 200px;border: 2px solid black">第一个div</div>
    <div class="one">第二个div</div>
    <div id="three" class="three">第三个div</div>
    <div id="one">第四个div</div>
    <div>第二个div</div>
    <p>这是段落</p>
    <h3></h3>
</body>
</html>